<template>
    <div class="content">
        <cl-crud @load="onLoad">
            <template #slot-btn>
                <el-button type="danger" size="mini" @click="batchFiled(0)" :disabled="selectRow.length > 0 ? false : true">批量隐藏</el-button>
                <el-button type="primary" size="mini" @click="batchFiled(1)" :disabled="selectRow.length > 0 ? false : true">批量显示</el-button>
            </template>
            <template #slot-filter>
                <div class="filter-list">
                    <div class="filter-item">
                        <span class="filter-title">回复状态：</span>
                        <el-select
                                size="mini"
                                filterable
                                placeholder="请选择回复状态"
                                style="width: 140px"
                                v-model="selects.responsed"
                                @change="val => refresh({ responsed: val, page: 1 })"
                        >
                            <el-option value label="全部"></el-option>
                            <el-option label="未回复" value="0"></el-option>
                            <el-option label="已回复" value="1"></el-option>
                        </el-select>
                    </div>
                    <div class="filter-item">
                        <span class="filter-title">显示状态：</span>
                        <el-select
                                size="mini"
                                filterable
                                placeholder="请选择状态"
                                style="width: 140px"
                                v-model="selects.isDisplay"
                                @change="val => refresh({ isDisplay: val, page: 1 })"
                        >
                            <el-option value label="全部"></el-option>
                            <el-option label="隐藏" value="0"></el-option>
                            <el-option label="显示" value="1"></el-option>
                        </el-select>
                    </div>
                </div>
            </template>
            <template #table-column-goodsInfo="{ scope }">
                <div class="goods-info">
                    <img :src="scope.row.pic" />
                    <div class="goods-content">
                        <p>{{ scope.row.title }}</p>
                    </div>
                </div>
            </template>
            <template #table-column-isDisplay="{ scope }">
                <el-switch v-model="scope.row.isDisplay" :active-value="1" :inactive-value="0" @change="(e) => onSwitchChange(e, scope.row)"></el-switch>
            </template>
            <template #slot-repeat="{ scope }">
                <el-button type="text" size="small" @click="onRepeat(scope.row)" v-if="scope.row.responsed !== '1'">回复</el-button>
            </template>
        </cl-crud>

        <cl-form ref="cl-form"></cl-form>
    </div>
</template>

<script>
	export default {
		name: 'evaluate',
		data() {
			return {
				selects: {
					status: 0,
					isDisplay: '',
					responsed: '',
				},
				selectRow: []
			}
		},
		methods: {
			onLoad({ ctx, app }) {
				this.crud = app;
				ctx.service(this.$service.goods.evaluate)
					.set('table', {
						columns: [
							{
								type: 'selection',
								label: '全选',
								align: 'center',
								width: '60px'
							},
							{
								label: '商品信息',
								prop: 'goodsInfo',
								align: 'left',
								width: 350
							},
							{
								label: '订单号',
								prop: 'tradeNo',
								align: 'center',
                                width: 250
							},
							{
								label: '买家',
								prop: 'username',
								align: 'center'
							},
							{
								label: '评价内容',
								prop: 'evaluateContent',
								align: 'center'
							},
							{
								label: '回复内容',
								prop: 'response',
								align: 'center',
                                empty: '暂无回复'
							},
							{
								label: '评论时间',
								prop: 'createTime',
								align: 'center',
								sortable: 'custom'
							},
							{
								label: '状态',
								prop: 'isDisplay',
								align: 'center'
							}
						],
						props: {
							'default-sort': {
								prop: 'createTime',
								order: 'descending'
							}
						},
						op: {
							layout: ['slot-repeat']
						},
						on: {
							'selection-change': selection => {
								this.selectRow = selection;
							}
						}
					})
					.set('upsert', {
						props: {
							title: '请输入回复内容',
							width: '500px',
							labelWidth: '0px'
						},
						items: [
							{
								prop: 'title',
								component: {
									name: 'el-input',
									attrs: {
										type: 'textarea',
										placeholder: '请输入回复内容',
										clearable: true
									}
								},
								rules: [
									{
										required: true,
										message: '回复内容不能为空'
									}
								]
							},
						]
					})
					.set('layout', [
						['refresh-btn', 'slot-btn', 'slot-filter', 'flex1', 'search-key'],
						['data-table'],
						['flex1', 'pagination']
					])
					.done();
				app.refresh();
			},
			refresh(params) {
				this.crud.refresh(params);
			},
			// 批量操作
			batchFiled(status) {
				let idsArr = [];
				this.selectRow.forEach(item => {
					idsArr.push(item.id);
				});
				this.$service.comm.batchFiled({
					repository: 'evaluate',
					isDisplay: status,
					ids: idsArr.join(',')
				}).then(() => {
					this.crud.refresh();
				})
			},
			onSwitchChange(e, item) {
				this.$service.goods.evaluate.update({
					id: item.id,
					isDisplay: e
				}).then(() => {
					this.crud.refresh();
				}).catch(err => {
					this.$message.error(err);
				})
            },
			onRepeat(item) {
				let that = this;
				this.$refs['cl-form'].open({
					props: {
						title: '请输入回复内容',
						width: '500px',
						showClose: false,
						'label-width': '0px'
					},
					items: [
						{
							prop: 'response',
							component: {
								name: 'el-input',
								attrs: {
									type: 'textarea',
									placeholder: '请输入回复内容',
									rows: 5,
									clearable: true
								}
							},
							rules: [
								{
									required: true,
									message: '回复内容不能为空'
								}
							]
						},
					],
					on: {
						submit: ({ data, done, close }) => {
                            this.$service.goods.evaluate.update({
                                id: item.id,
								response: data.response
                            }).then(() => {
								that.crud.refresh();
								close();
                            }).catch(err => {
								that.$message.error(err);
								done();
                            })
						}
					}
				});
            }
		}
	};
</script>

<style lang="stylus" scoped>
.content {
    .goods-info {
    flexBox(space-between, flex-start)
    img {
        width: 80px;
        height: 80px;
        margin-right 10px
    }
        .goods-content {
            flex: 1;
            .price {
                span {
                    color: $main-color
                }
            }
        }
    }
}
</style>